<!-- src/components/TaskBar.vue -->
<template>
  <div class="task-row" :style="{ top: `${rowIndex * rowHeight}px` }">
    <!-- 预计时间条 + 编辑 -->
    <a-popover placement="top" trigger="hover" :getPopupContainer="getPopupContainer">
      <template #content>
        <div>项目名称：{{ task.projectName }}</div>
        <div>任务名称：{{ task.taskName }}</div>
        <div>项目经理：{{ task.projectManager }} </div>
        <div>预计时间：{{ task.estimatedStartTime }} → {{ task.estimatedEndTime }}</div>
        <div>实际时间：{{ task.actualStartTime }} → {{ task.actualEndTime }}</div>
        <div>具体内容：{{ task.content }}</div>
        <a-space>
         <a-button type="link" @click="$emit('edit', task)">编辑</a-button>
         <a-popconfirm
           title="确定要删除此任务吗？"
           ok-text="是"
           cancel-text="否"
           @confirm="$emit('delete', task)"
           :getPopupContainer="getPopupContainer"
         >
           <template #icon>
             <!-- 默认警告图标即可 -->
           </template>
           <a-button type="link">删除</a-button>
         </a-popconfirm>
       </a-space>
      </template>
      <div class="bar estimated" :style="estimatedStyle" />
    </a-popover>

    <!-- 实际时间条 + 编辑 -->
    <a-popover placement="top" trigger="hover" :getPopupContainer="getPopupContainer">
      <template #content>
        <div>项目名称：{{ task.projectName }}</div>
        <div>任务名称：{{ task.taskName }}</div>
        <div>项目经理：{{ task.projectManager }} </div>
        <div>预计时间：{{ task.estimatedStartTime }} → {{ task.estimatedEndTime }}</div>
        <div>实际时间：{{ task.actualStartTime }} → {{ task.actualEndTime }}</div>
        <div>具体内容：{{ task.content }}</div>
        <a-space>
         <a-button type="link" @click="$emit('edit', task)">编辑</a-button>
         <a-popconfirm
           title="确定要删除此任务吗？"
           ok-text="是"
           cancel-text="否"
           @confirm="$emit('delete', task)"
           :getPopupContainer="getPopupContainer"
         >
           <template #icon>
             <!-- 默认警告图标即可 -->
           </template>
           <a-button type="link">删除</a-button>
         </a-popconfirm>
       </a-space>
      </template>
      <div class="bar actual" :style="actualStyle" />
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { TodoItem } from '@/stores/todo'
import type { Dayjs } from 'dayjs';
const props = defineProps<{
  task: TodoItem
  rowIndex: number
  unitWidth: number
  viewStart: Dayjs
}>()

const getPopupContainer = () => document.body

const rowHeight = 0
function toMs(str: string) { return new Date(str).getTime() }

const estimatedStyle = computed(() => {
  const s = toMs(props.task.estimatedStartTime)
  const e = toMs(props.task.estimatedEndTime)
  const offsetH = (s - props.viewStart.valueOf()) / 3600000
  return {
    left: `${props.unitWidth * offsetH + 150}px`,
    width: `${props.unitWidth * (e - s)/3600000}px`
  }
})

const actualStyle = computed(() => {
  const s = toMs(props.task.actualStartTime)
  const e = toMs(props.task.actualEndTime)
  const offsetH = (s - props.viewStart.valueOf()) / 3600000
  return {
    left: `${props.unitWidth * offsetH + 150}px`,
    width: `${props.unitWidth * (e - s)/3600000}px`
  }
})
</script>

<style scoped>
.task-row {
  position: absolute;
  height: 48px;
  left: -30px; right: 0;
}
.bar {
  position: absolute;
  height: 16px;
  border-radius: 4px;
}
.bar.estimated { background: rgba(39,108,255,0.5); top: 1px; }
.bar.actual    { background: rgba(255,165,0,0.5); top: 18px; }
</style>
